<template>
  <div v-if="field" class="tabCommon-wrapper ui segment" :class="{loading:loading}">
    <div v-if="!loading" class="ui menu attached tabular top" :class="field.name">
      <a href="javascript:;" class="item" :data-tab="'item_'+ind" :class="{active:ind==0}"
         v-for="(g,ind) in group">
        <input type="radio" :value="g.val" v-model="tabRadio">&nbsp; {{g.title}}
      </a>
    </div>
    <slot v-if="!loading"></slot>
  </div>
</template>
<script type="text/ecmascript-6">
  import tool from 'src/util/tool'


  export default {
    data() {
      return {
        current_page: 1,
        tabRadio: null,
      }
    },
    mounted() {
//      this.$nextTick(()=> {
//        $(this.selector).tab({
//          history: true
//        });
//      });
    },
    computed: {
      selector(){
        return `.menu.${this.field.name}>.item`;
      },
      loading() {
        return !(this.group);
      },
    },
    methods: {},
    watch: {
      loading: function (val, old) {
        if (!val) {
          this.$nextTick(()=> {
            $(this.selector).tab({
              history: false
            });
          })
        }
      }
    },
    components: {},
    props: ['field', 'group']
  }
</script>
<style rel="stylesheet/less" scoped lang="less">@dir: "common/";

.tabCommon-wrapper {
}
</style>
